<template>
    <ph-flex class="ph-form" dir="col"><slot></slot></ph-flex>
</template>
<script lang="ts">
import { computed, defineComponent, provide } from 'vue'
import {PhFlex} from '../base'
export default defineComponent({
    props:{
        type:{
            type:String //<none|plain>
        }
    },
    components:{
        PhFlex
    },
    setup(props){
        const style = computed(()=>{
            return props.type==="plain"?props.type:undefined
        })
        provide("vevt",undefined)
        provide("registerField",undefined)
        provide("validateAll",undefined)
        provide("phValidate",undefined)
        provide("phValidation",false)
        provide("formStyle",style)
    }
})
</script>
<style lang="scss" scoped>
.ph-form{
    width: 100%;
    max-width: 992px;
    font-size: var(--phx);
}
@media screen and (max-width: 768px) {

}
@media screen and (min-width: 769px) {
    .ph-form{
        padding: 0 var(--ph-15);
    }
}
</style>
